<template > 
    <div class="boxVal"> 
        <div class="content">
            <div v-html="conData.content">

            </div>
            <div class="operate">
                <div class="sign">
                    <div class="name">
                       <div style="width: 50px;"> 姓名：</div>
                        <div v-if="!resultImg" class="nameBtn" @click = "to">
                            点击签名
                        </div>
                        <img class="nameSign" v-if="resultImg" :src="resultImg" alt="">

                    </div>
                    <div class="time">
                        申请日期：{{ `${year} 年 ${month} 月 ${day} 日` }}
                    </div>
                </div>
                <div v-if="conData.signature == 0">
                    <div>
                        注：请在上表右下角签名确认
                    </div>
                    <div style="margin: 20px 0 40px;">
                        <el-checkbox v-model="checked">已阅读并同意以上内容</el-checkbox> 
                    </div>
                    <div class="submit" :class = "{active:checked&&resultImg}" @click = "checked&&resultImg?submit():''">
                        确认提交
                    </div>
                </div>
                
            </div>
            <!-- <div class="signature" v-if="zIndex == 1"  >
                <signature @result = "result" ref = "signature"></signature>
            </div> -->
            <!-- <el-dialog
                :visible.sync="zIndex"
                width="100%"
                :before-close="handleClose">
                <signature @result = "result" ref = "signature"></signature>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog> -->
            <el-dialog fullscreen :show-close="false" @open="open"
            :visible.sync="zIndex" width="100%"  destroy-on-close>
                <signature @result = "result" ref = "signature"></signature>
            <span slot="footer" class="dialog-footer ">
                <!-- <el-button size="small" @click="zIndex = false">确 定</el-button> -->
                <!-- <div class="btn">
                    <el-button size="small" @click="submitClick">提交</el-button>
                </div> -->
            </span>
        </el-dialog>
        </div>
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import signature from "./signature.vue"
import { mapMutations, mapState } from "vuex";
const date = new Date();
    export default {
        name: "tem",
        components: {signature},
        mixins: [pagePublic],
        data(){
            return{
                isDetails:false,
                checked:false,
                year:date.getFullYear(),
                month:date.getMonth()+1,
                day:date.getDate(),
                resultImg:'',
                zIndex:false,
                conData:{},
                // urls:{
                //     list: {
                //         url:this.$api.tem.list,
                //         method:"get",
                //         sync:false,
                //     },
                //     add:this.$api.tem.add,
                //     edit:this.$api.tem.edit,
                //     del:this.$api.tem.del
                // },

                
            }
        },
        computed: {
            ...mapState(['configInfo']),

        },
        created() {
            console.log(this.$route.params,333333)
            this.getuserpact()
        },
        methods:{
            ...mapMutations(['set_configInfo']),
            getuserpact(){
                let param = {
                    userpact_id:this.$route.params.userpact_id
                }
                this.$api.study.myContract.detail(param).then(res=>{
                    
                    let conData = res.data || {}
                    let content = res.data.content
                    this.resultImg = conData.image
                    if(conData.create_time){
                        let tijme = conData.create_time.split(' ');
                        let year = tijme[0].split('-')[0];
                        let month = tijme[0].split('-')[1];
                        let day = tijme[0].split('-')[2];
                        this.year = year;
                        this.month = month;
                        this.day = day;
                        this.isDetails = true
                    }else{
                        this.year = date.getFullYear()
                        this.month = date.getMonth()+1
                        this.day = date.getDate()
                    }
                    if(content){
                        
                       let texts = content.split('签字/盖章')
                       console.log(texts[1],22222)
                       let text1 = texts[1].replace('<img src=','<img class = "gz" src=')
                       let image = text1.replace('style="font-size: 14px; max-width: 100%;" ','style="width:100px;height:100px;margin-top:-100px;margin-left:30px;z-index:30; font-size: 14px; max-width: 100%;')
                       console.log(text1,image,322231231)
                       texts[1] = image
                       conData.content = texts.join("")

                       conData.content = texts.join("")
                    }
                    this.conData = conData
                })
            },
            to(){
                this.zIndex = true
                // this.$router.push(`/signature/${this.$route.params.company_id}/${this.$route.params.contract_id}`)
            },
            open(){
                // this.$nextTick(()=>{
                //     this.$refs.signature.init(this.$route.params.company_id,this.$route.params.contract_id)
                // })
            },
            result(e){
                this.$nextTick(()=>{
                 this.resultImg = e
                });
                this.zIndex = false

            },
            submit(){
                let params = {
                    company_id:this.$route.params.company_id,
                    image:this.resultImg,
                    contract_id:this.$route.params.contract_id,

                }
                this.$api.study.myContract.add(params).then(res=>{
                    if(res.status == 200){
                        this.$message({
                            message: res.msg||'提交成功',
                            type:'success'
                        })
                        this.getuserpact()
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
.gz{
    width: 150px;
    height: 80px;
}
.boxVal{
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    .content{
        width: 100%;
        height: calc(100%);
        padding: 30px;
        box-sizing: border-box;
        overflow: auto;

    }

}

.operate{
    margin-top: 60px;
    margin-bottom: 50px;
    width: 100%;
    .sign{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        font-size: 16px;
        color: #333;
        font-weight: 300;
        margin-bottom: 30px;
        .name{
            height: 80px;
            width: 200px;
            display: flex;
            align-items: center;
            position: relative;
            .nameBtn{
                width: 150px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #ededed;
                border-radius: 4px;
            }
            .nameSign{
                width: 80px;
                height: 150px;
                transform-origin:  top center;
                position: absolute;
                top: 30px;
                left: 110px;
                bottom: 0px;
                right: 0;
                // inset: 0;
                transform: rotateZ(-90deg);
            }

        }
        .name , .time{
            display: flex;
            // flex-direction: column;
            justify-content: flex-end;
        }
    }
}
.submit{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 80px;
    font-size: 16px;
    color: #333;

    // background-color: #ccc;
    background:linear-gradient(#ccc , #ccc);

}
.active{
    color: #fff;
    background:linear-gradient(to right, #ffae86 , #fc6b6b);
}
.signature{
    width: 100vw;
    height: 100vh;
    display: flex;
    box-sizing: border-box;
    // z-index: -1;

}
</style>